<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="firstName" />
      <br />
      <input type="text" v-model="lastName" />
      <br />
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
            name: "尚硅谷",
          };
        },
        methods: {
          // fullName() {
          //   console.log("fullname 被调用");
          //   return this.firstName + "----" + this.lastName;
          // },
        },
        computed: {
          // 完整写法
          //   fullName: {
          //     get() {
          //       console.log("触发了get");
          //       return this.firstName + "-----" + this.lastName;
          //     },
          //     set(value) {
          //       console.log("触发了set");
          //       let arr = value.split("-");
          //       this.firstName = arr[0];
          //       this.lastName = arr[1];
          //     },
          //   },
          // 简写
          // 比methods 优势： 复用的时候通过缓存读取数据 更高效
          fullName: function () {
            console.log("触发了get");
            return this.firstName + "-----" + this.lastName;
          },
        },
      });
    </script>
  </body>
</html>
